/*===================*/
/*1) Utilities*/
/*2) Hero*/
/*3) More*/
/*4) Contact*/
/*===================*/
/* Utilities */
html,
body {
  padding: 0;
  margin: 0;
  height: 100vh;
  overflow: hidden; }

.clearfix {
  clear: both; }

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  color: white;
  overflow-y: auto;
  background: #3B74EC;
  background: -webkit-linear-gradient(-45deg, #3B74EC 0%, #B65AFC 100%); }
  .hero .overlay {
    width: 100vw;
    height: 100vh;
    position: fixed; }
  .hero .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-height: 100%; }
    @media screen and (max-width: 720px) {
      .hero .content {
        margin: 50px 0; } }
    @media screen and (max-width: 720px) {
      .hero .content {
        width: 100%; } }
    .hero .content .heading {
      font-family: "Share Tech Mono";
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .7em;
      font-size: 2rem;
      padding: 0 0 0 .7em; }
      @media screen and (max-width: 720px) {
        .hero .content .heading {
          font-size: 2rem; } }
    .hero .content .count-box {
      display: inline-block;
      padding: 50px;
      font-family: "Share Tech Mono"; }
      @media screen and (max-width: 720px) {
        .hero .content .count-box {
          box-sizing: border-box;
          padding: 50px 0;
          width: 25%; } }
      .hero .content .count-box .countdown-num {
        font-size: 42px;
        margin: 0; }
      .hero .content .count-box h4 {
        margin: 0;
        margin-top: 20px;
        letter-spacing: .15em; }
        .hero .content .count-box h4:first-letter {
          text-transform: uppercase; }
    .hero .content .description {
      font-family: "Space Mono";
      line-height: 42px;
      font-size: 15px;
      letter-spacing: .15rem;
      padding: 0 20px;
      width: 700px;
      margin: auto; }
      @media screen and (max-width: 980px) {
        .hero .content .description {
          padding: 0; } }
      @media screen and (max-width: 720px) {
        .hero .content .description {
          width: 90%;
          padding: 0; } }
    .hero .content .links {
      max-width: 600px;
      margin: 50px auto 0;
      text-align: center; }
      @media screen and (max-width: 720px) {
        .hero .content .links {
          margin: 50px auto; } }
      .hero .content .links a {
        cursor: pointer;
        width: 170px;
        display: inline-block;
        padding: 15px 0;
        margin: 0 15px;
        border: 1px solid #fff;
        color: #fff;
        text-decoration: none;
        font-family: "Space Mono";
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .1rem;
        position: relative;
        background: #fff;
        color: #000;
        transition: background .4s, color .4s; }
        @media screen and (max-width: 720px) {
          .hero .content .links a {
            display: block;
            margin: 20px auto;
            width: 80%; } }
        .hero .content .links a:hover {
          background: rgba(255, 255, 255, 0);
          color: #fff; }

/* More */
.more {
  background: #111;
  position: absolute;
  z-index: 2;
  bottom: -100vh;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  color: #fff;
  overflow-Y: auto;
  transition: bottom .5s; }
  .more.active {
    bottom: 0; }
  .more .exit {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: #fff;
    color: #111;
    overflow: hidden;
    cursor: pointer; }
    .more .exit span {
      display: inline-block;
      font-size: 42px;
      text-align: center;
      width: 50px;
      transform: rotate(45deg); }
  .more .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    max-height: 100%;
    transform: translate(-50%, -50%); }
  .more .heading {
    font-family: "Share tech mono";
    font-size: 42px;
    text-align: center; }
    @media screen and (max-width: 720px) {
      .more .heading {
        font-size: 32px; } }
  .more .description {
    font-family: "Space Mono";
    margin: auto;
    text-align: center;
    max-width: 500px;
    line-height: 2em;
    letter-spacing: .15em;
    font-size: 1.2rem; }
    @media screen and (max-width: 720px) {
      .more .description {
        font-size: 16px; } }
  .more .text {
    margin-top: 50px;
    font-family: "Space Mono";
    line-height: 2.3em;
    letter-spacing: .05em;
    column-count: 2;
    column-gap: 100px;
    margin-bottom: 35px; }
    @media screen and (max-width: 980px) {
      .more .text {
        column-count: 1; } }
    @media screen and (max-width: 720px) {
      .more .text {
        font-size: 14px; } }

/* Contact */
.contact {
  background: #fff;
  position: absolute;
  z-index: 2;
  bottom: -100vh;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  color: #111;
  overflow-Y: auto;
  transition: bottom .5s; }
  .contact.active {
    bottom: 0; }
  .contact .exit {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: #111;
    color: #fff;
    overflow: hidden;
    cursor: pointer; }
    .contact .exit span {
      display: inline-block;
      font-size: 42px;
      text-align: center;
      width: 50px;
      transform: rotate(45deg); }
  .contact .content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    max-height: 100%;
    transform: translate(-50%, -50%); }
  .contact .heading {
    font-family: "Share tech mono";
    font-size: 42px;
    text-align: center; }
    @media screen and (max-width: 720px) {
      .contact .heading {
        font-size: 32px; } }
  .contact .description {
    font-family: "Space Mono";
    margin: auto;
    text-align: center;
    max-width: 500px;
    line-height: 2em;
    letter-spacing: .15em;
    font-size: 1.2rem; }
    @media screen and (max-width: 720px) {
      .contact .description {
        font-size: 16px; } }
  .contact .contact-form {
    width: 60%;
    margin: 50px auto 0; }
    @media screen and (max-width: 980px) {
      .contact .contact-form {
        width: 80%; } }
    .contact .contact-form label {
      font-family: "Space Mono";
      font-size: 13px;
      letter-spacing: .3em;
      display: block;
      text-transform: uppercase;
      color: #444; }
    .contact .contact-form input,
    .contact .contact-form textarea {
      margin-top: 10px;
      width: 100%;
      display: block;
      background: #fff;
      border: none;
      border: 1px solid #aaa;
      min-height: 45px;
      box-sizing: border-box;
      padding: 10px;
      color: #000000;
      letter-spacing: .1em;
      font-family: "Space Mono";
      font-size: 12px; }
    .contact .contact-form input:focus,
    .contact .contact-form textarea:focus {
      outline: none; }
    .contact .contact-form .name,
    .contact .contact-form .email {
      float: left;
      width: 47.5%; }
      @media screen and (max-width: 720px) {
        .contact .contact-form .name,
        .contact .contact-form .email {
          width: 100%;
          margin: 10px 0; } }
    .contact .contact-form .message {
      width: 100%;
      margin-top: 10px; }
    .contact .contact-form .name {
      margin-right: 30px; }
    .contact .contact-form .submit {
      margin-top: 30px; }
    .contact .contact-form .submit input {
      background: #222;
      text-transform: uppercase;
      font-family: "Space Mono";
      letter-spacing: .3em;
      transition: background .2s, color .2s;
      cursor: pointer;
      color: #ffffff;
      border: 2px solid #222; }
      .contact .contact-form .submit input:hover {
        background: #fff;
        color: #222; }
    .contact .contact-form .contact-result {
      font-family: "Space Mono";
      font-size: 13px;
      letter-spacing: .1em;
      text-align: center;
      transition: color .2s;
      color: rgba(255, 255, 255, 0); }
    .contact .contact-form .contact-result.submited {
      color: #111; }